<template>
	<div class="user_list table-theme">
		<head-title title="用户--用户列表"></head-title>
		<el-card>
			<div class="top-menu">
				<div class="menu-left">
					<select-view 
						:option-list="roleList" 
						:value="admin_role" 
						type="admin_role" 
						@value="setSelectValue" 
						labelName="name" 
						valueName="admin_role_id">
					</select-view>
					<select-view 
						:option-list="roleTypeList" 
						:value="role_type" 
						type="role_type" 
						@value="setSelectValue" 
						labelName="type_name" 
						valueName="role_type">
					</select-view>
					<!-- <select-view 
						:option-list="exhibitionList" 
						:value="is_exhibition" 
						type="is_exhibition" 
						@value="setSelectValue">
					</select-view> -->
				</div>
				<div class="menu-right">
					<refresh-button @refresh="refreshPage"></refresh-button>
					<search-view :option="searchOption" @value="goSearch" @clear="refreshPage"></search-view>
					<div class="add">
						<el-button type="primary" @click="showDialog(2, 0)" v-if="btnShow.add && admin_id == 1">添加用户</el-button>
					</div>
				</div>
			</div>
			<p class="data-number">总用户数：{{ total }}</p>
			<el-table :data="userList">
				<el-table-column label="用户序号" align="center" prop="user_id"></el-table-column>
				<el-table-column label="头像" align="center" width="100">
					<template slot-scope="scope">
						<el-image :src="scope.row.heard_img" style="width: 50px; height: 50px; vertical-align: top;"></el-image>
					</template>
				</el-table-column>
				<el-table-column label="用户二维码" align="center" width="80">
					<template slot-scope="scope">
						<ImgPopover :src="scope.row.qrcode"></ImgPopover>
					</template>
				</el-table-column>

				<el-table-column label="名字" align="center" prop="nickname"></el-table-column>
				<el-table-column label="电话" align="center" prop="phone"></el-table-column>
				<el-table-column label="角色" align="center" prop="role_name"></el-table-column>
				<el-table-column label="所属公司" align="center" prop="filiale_name"></el-table-column>
				<el-table-column label="商家ID" align="center" prop="store_id"></el-table-column>
				<el-table-column label="商家名字" align="center" prop="store_name"></el-table-column>
				<el-table-column label="推荐人id" align="center" prop="belong_refer"></el-table-column>
				<el-table-column label="时间" align="center" prop="add_time"></el-table-column>
				<el-table-column label="注册端" align="center" prop="client"></el-table-column>
				<el-table-column label="次数" align="center" prop="rqnums"></el-table-column>
				<el-table-column label="分组" align="center" prop="store_group_name" v-if="admin_id == 2 || admin_id == 11"></el-table-column>
				<el-table-column label="操作" align="center" width="300">
					<template slot-scope="scope">
						<el-button type="primary" class="btn" size="mini" @click="showDialog(0,scope.row)">详情</el-button>
						<el-button type="primary" class="btn" size="mini" @click="showDialog(1, scope.row)" v-if="(admin_type == 1 && scope.row.is_admin != 1) || (filiale_id == 2 && scope.row.is_admin != 1)">编辑</el-button>
						<el-button type="primary" class="btn" size="mini" @click="goFootDetails(scope.row.user_id)">足迹</el-button>
						<el-button type="primary" class="btn" size="mini" v-if="admin_id == 2 || admin_id == 11" @click="showDialog(4,scope.row)">分组</el-button>
						<el-button type="primary" class="btn" size="mini" @click="showDialog(3,scope.row)">公众号绑定二维码</el-button>
						<el-button type="primary" class="btn" size="mini" @click="addTime(scope.row.user_id)" v-if="(admin_id == 1 || admin_id == 8 || admin_id == 12)">增加次数</el-button>
						<el-button type="primary" class="btn" size="mini" @click="goSpreadUser(scope.row.user_id)">查看下级</el-button>
						<el-button type="danger" class="btn" size="mini" @click="del(scope.row.user_id)" v-if="admin_id == 1 && scope.row.is_admin != 1">删除</el-button>
						<el-button type="danger" class="btn" size="mini" @click="mydel(scope.row.user_id)" v-if="admin_id == 1 && scope.row.is_admin != 1">二维码删除</el-button>
						<el-button type="danger" class="btn" size="mini" @click="userLogout(scope.row.user_id)" v-if="scope.row.type == 1 && admin_id == 17  && scope.row.is_admin != 1">注销</el-button>
						
						
					</template>
				</el-table-column>
			</el-table>
			<div class="pages">
				<el-pagination background layout="prev, pager, next, jumper" :total="total" @current-change="init" :current-page="page"></el-pagination>
			</div>
		</el-card>

		<!-- 展示用户信息弹框 -->
		<el-dialog title="用户信息详情" :close-on-click-modal="false" :visible.sync="userInfoDialog" width="500px" center
		 :modal-append-to-body="false">
			<div class="user-info">
				<el-avatar :size="150" :src="userInfo.heard_img"></el-avatar>
				<div class="info-exhibition">
					<p class="name">名字：{{ userInfo.nickname }}</p>
					<p class="phone">手机号码：{{ userInfo.phone }}</p>
					<p class="client">注册端：{{ userInfo.client }}</p>
					<p class="time">时间：{{ userInfo.add_time }}</p>
					<p class="role">角色：{{ userInfo.role_name }}</p>
					<p class="belong-refer">归属商家：{{ userInfo.belong_refer }}</p>
					<p class="user-Bid">推荐人ID：{{ userInfo.user_B_id }}</p>
				</div>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="userInfoDialog = false">取 消</el-button>
				<el-button type="primary" @click="userInfoDialog = false">确 定</el-button>
			</span>
		</el-dialog>

		<!-- 修改用户信息弹框 -->
		<el-dialog title="修改用户信息" :close-on-click-modal="false" :visible.sync="reviseUserInfo" width="500px" center
		 :modal-append-to-body="false">
			<el-form :model="userInfoForm" ref="userInfoForm" :rules="userInfoFormRules" label-width="120px">
				<div class="user-info">
					<el-form-item label="头像:" class="upload-box" prop="heard_img">
						<div class="headImg">
							<el-upload class="avatar-uploader" ref="upload" action="fakeaction" :show-file-list="false" :http-request=" function(res) { return upload(res, 0); } "
							 multipleaccept="image/*"> <img v-if="userInfoForm.heard_img" :src="userInfoForm.heard_img" class="avatar" />
								<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							</el-upload>
						</div>
					</el-form-item>
					<div class="info-exhibition">
						<el-form-item label="名字:" prop="nickname">
							<el-input v-model="userInfoForm.nickname" placeholder="请输入名字"></el-input>
						</el-form-item>
						<el-form-item label="归属商家:" prop="store_id" >
							<!-- <el-input v-model="userInfoForm.store_id" placeholder="请输入归属商家ID" :disabled="admin_id != 1 && admin_id != 8 && admin_id != 12 && admin_id != 5"></el-input> -->
							<el-input v-model="userInfoForm.store_id" placeholder="请输入归属商家ID" :disabled="admin_id != 1"></el-input>
						</el-form-item>
						<el-form-item label="推荐人ID:" prop="belong_refer">
							<el-input v-model="userInfoForm.belong_refer" placeholder="请输入推荐人ID"></el-input>
						</el-form-item>
						<!-- <el-form-item label="子公司：" prop="filiale_id">
							<el-select v-model="userInfoForm.filiale_id" placeholder="请选择">
								<el-option v-for="item in filialeList" :key="item.filiale_id" :label="item.name" :value="item.filiale_id"></el-option>
							</el-select>
						</el-form-item> -->
						<el-form-item label="角色身份" prop="is_admin">
							<el-select v-model="userInfoForm.is_admin" placeholder="请选择">
								<el-option v-for="(item, index) in roleList" :key="index" :label="item.name" :value="item.admin_role_id"></el-option>
							</el-select>
						</el-form-item>
					</div>
				</div>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="reviseUserInfo = false">取 消</el-button>
				<el-button type="primary" @click="revise">确 定</el-button>
			</span>
		</el-dialog>

		<!-- 添加用户信息弹框 -->
		<el-dialog title="添加用户" :close-on-click-modal="false" :visible.sync="addUserDialog" width="500px" center
		 :modal-append-to-body="false">
			<el-form :model="addUserForm" :rules="addUserFormRules" ref="addUserForm" label-width="120px">
				<div class="user-info">
					<el-form-item label="头像:" class="upload-box" prop="heard_img">
						<div class="headImg">
							<el-upload class="avatar-uploader" ref="upload" action="fakeaction" :show-file-list="false" :http-request=" function(res) { return upload(res, 1); } "
							 multipleaccept="image/*"> <img v-if="imageUrl" :src="imageUrl" class="avatar" />
								<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							</el-upload>
						</div>
					</el-form-item>
					<div class="info-exhibition">
						<el-form-item label="名字:" prop="nickname">
							<el-input v-model="addUserForm.nickname" placeholder="请输入名字" clearable></el-input>
						</el-form-item>
						<el-form-item label="手机号码:" prop="phone">
							<el-input v-model="addUserForm.phone" placeholder="请输入手机号码" clearable></el-input>
						</el-form-item>
						<el-form-item label="密码:" prop="password">
							<el-input v-model="addUserForm.password" placeholder="请输入密码" show-password></el-input>
						</el-form-item>
						<!-- <el-form-item label="子公司：" prop="filiale_id">
							<el-select v-model="addUserForm.filiale_id" placeholder="请选择">
								<el-option v-for="item in filialeList" :key="item.filiale_id" :label="item.name" :value="item.filiale_id"></el-option>
							</el-select>
						</el-form-item> -->
						<el-form-item label="角色身份" prop="is_admin">
							<el-select v-model="addUserForm.is_admin" placeholder="请选择">
								<el-option v-for="(item, index) in roleList" :key="index" :label="item.name" :value="item.admin_role_id"></el-option>
							</el-select>
						</el-form-item>
					</div>
				</div>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="addUserDialog = false">取 消</el-button>
				<el-button type="primary" @click="addUserClick('addUserForm')">确 定</el-button>
			</span>
		</el-dialog>

		<!-- 商家分组 -->
		<el-dialog title="用户分组" :close-on-click-modal="false" :visible.sync="isGroupDialog" width="500px" center  :modal-append-to-body="false">
			<el-form
        :model="groupForm"
        :rules="groupFormRules"
        ref="groupForm"
        label-width="100px"
      >
        <el-form-item label="分组名称:" prop="group_id">
		<el-select v-model="groupForm.group_id" placeholder="请选择分组">
		  <el-option v-for="(item,index) in selectStoreGroupList" :key="index" :value="item.group_id" :label="item.group_name"></el-option>
		</el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="onClone('groupForm')">取 消</el-button>
        <el-button
          type="primary"
          @click="onSubmit('groupForm')"
          >确 定</el-button
        >
      </span>
		</el-dialog>
	</div>
</template>

<script>
	import spreadUser from '@/views/operation/spread_user.vue';
	import ImgPopover from '@/components/ImgPopover';
	import SelectView from '@/components/SelectView';
	export default {
		name: 'user_list',
		components: {
			ImgPopover,
			SelectView
		},
		data() {
			return {
				filiale_id: localStorage.getItem('filiale_id'),
				role_name: [],
				roleList: [],
				roleTypeList: [],
				role_type: '',
				btnShow: {
					add: true,
					del: true,
					mydel: true,
					edit: true,
					search: true
				},
				admin_type: localStorage.getItem('admin_type'),
				admin_id: localStorage.getItem('admin_id'),
				power: window.JSON.parse(localStorage.getItem('power')),
				store_id: localStorage.getItem("store_id"),
				imageUrl: '',
				userInfo: '', // 展示用户信息
				userInfoForm: {
					heard_img: '',
					nickname: '',
					store_id: '',
					phone: '',
					belong_refer: '',
					is_admin: '',
					filiale_id:''
				}, // 要更改的用户信息
				addUserForm: {
					nickname: '',
					phone: '',
					password: '',
					heard_img: '',
					is_admin: 0,
					filiale_id:''
				}, // 添加用户的信息
				addUserFormRules: {
					nickname: [{
						required: true,
						message: '请输入名字'
					}],
					phone: [{
						required: true,
						message: '请输入手机号码'
					}],
					password: [{
						required: true,
						message: '请输入密码'
					}],
					heard_img: [{
						required: true,
						message: '请上传头像'
					}],
					is_admin: [{
						required: true,
						message: '请选择角色身份'
					}],
					filiale_id:[{
						required: true,
						message: '请选择子公司'
					}]
				},
				userInfoFormRules: {
					nickname: [{
						required: true,
						message: '请输入名字'
					}],
					is_admin: [{
						required: true,
						message: '请选择角色身份'
					}],
					heard_img: [{
						required: true,
						message: '请上传头像'
					}],
					filiale_id:[{
						required: true,
						message: '请选择子公司'
					}]
				},
				userInfoDialog: false, // 用户详情弹框
				reviseUserInfo: false, // 修改用户信息弹框
				addUserDialog: false, // 添加用户弹框
				userList: [], // 用户列表
				total: 0,
				totalData: 0,
				admin_role: -1,
				page: 0,
				searchOption: [{
					value: 0,
					label: '用户ID'
				}, {
					value: 1,
					label: '电话'
				}, {
					value: 2,
					label: '归属商家'
				}, {
					value: 3,
					label: '推荐人'
				}],
				selectContent: '', // 分类搜索平输入框的值
				classSelect: 0, // 分类搜索
				user_id: '', // 用户id
				filialeList:[],
				qrCodeDialog:false,
				exhibitionList:[
					{
						label:"全部",
						value:""
					},
					{
						label:"普通用户",
						value:0
					},
					{
						label:"展会扫码用户",
						value:1
					}
				],
				is_exhibition:"",
				isGroupDialog:false,
				groupForm:{
					user_id:'',
					group_id:''
				},
				groupFormRules:{
					group_id:[{required: true,
						message: '请选择分组'}]
				},
				selectStoreGroupList:[]
			};
		},
		methods: {
			// 初始化列表
			init(e) {
				this.page = e;
				let data = {
					page: e - 1 ? e - 1 : 0,
					limit: 10,
					asc: this.ase,
					is_admin: this.admin_role,
					role_type: this.role_type,
					is_exhibition:this.is_exhibition
				};

				if (this.admin_role == -1) {
					delete data.is_admin
				}

				if (this.admin_type != 1 && this.admin_type != 4) {
					data.store_id = localStorage.getItem('store_id');
				}

				if (this.classSelect == 0) {
					data.user_id = this.selectContent;
				} else if (this.classSelect == 1) {
					data.phone = this.selectContent;
				} else if (this.classSelect == 2) {
					data.store_id = this.selectContent;
				} else if (this.classSelect == 3) {
					data.belong_refer = this.selectContent;
				}

				this.$http(this.$ApiList.UserList, data).then(res => {
					this.userList = [];
					res.datas.data.forEach(item => {
						let is_admin = item.is_admin;
						this.role_name.forEach(item2 => {
							if (is_admin == item2.admin_role_id) {
								item.role_name = item2.name;
							}
						});
						this.userList.push(item);
					});
					this.total = res.datas.count;
				});
			},
			// 删除
			del(id) {
				this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					})
					.then(() => {
						//return;
						let data = {
							user_id: id
						};
						this.$http(this.$ApiList.DelUser, data).then(res => {
							if (res.code == 200) {
								this.$message({
									message: '删除成功',
									type: 'success'
								});
								this.refreshPage();
							}
						});
					})
					.catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						});
					});
			},
			// 二维码删除
			mydel(id) {
				this.$confirm('此操作将永久删除该用户二维码, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						//return;
						let data = {
							user_id: id
						};
						this.$http(this.$ApiList.DelUserCode, data).then(res => {
							if (res.code == 200) {
								this.$message({
									message: '删除成功',
									type: 'success'
								});
								this.refreshPage('delQRcode');
							}
						});
					})
					.catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						});
					});
			},
			// 控制Dialog显示
			showDialog(type,row) {
				if (type == 0) {
					this.userInfoDialog = true;
					this.userInfo = row;
				} else if (type == 1) {
					const { user_id, heard_img, nickname, store_id, phone, belong_refer, is_admin, filiale_id } = row
					this.userInfoForm.user_id = user_id;
					this.userInfoForm.heard_img = heard_img;
					this.userInfoForm.nickname = nickname;
					this.userInfoForm.store_id = store_id;
					this.userInfoForm.phone = phone;
					this.userInfoForm.belong_refer = belong_refer;
					this.userInfoForm.is_admin = is_admin;
					this.userInfoForm.filiale_id = filiale_id
					this.userInfoForm = row;
					this.reviseUserInfo = true;
				}else if(type == 2){
					this.addUserDialog = true;
				}else if(type == 3){
					let data = {user_id:row.user_id}
					this.$http(this.$ApiList.GetGzhTicket,data).then(res=>{
						this.$alert(
							`<p style="text-align:center;padding:10px 0;">
								<img style="width:200px" src="${res.datas}"/>
							</p>`,"公众号绑定二维码(右键保存图片)",{dangerouslyUseHTMLString:true}
						).catch(()=>{});
					})
				}else if(type == 4){
					let data = {
						store_id:this.store_id
					}
					this.$http(this.$ApiList.SelectStoreGroup,data).then(res=>{
						this.selectStoreGroupList = res.datas
					})
					this.groupForm.user_id = row.user_id
					this.isGroupDialog = true
				}
			},
			// 修改用户信息
			revise() {
				this.$http(this.$ApiList.UserAdd, this.userInfoForm).then(res => {
					this.$message({
						message: res.datas,
						type: 'success'
					});
					this.reviseUserInfo = false;
					this.init();
				});
			},
			goSearch(classSelect, selectContent) {
				this.classSelect = classSelect;
				this.selectContent = selectContent;
				this.init();
			},
			// 头像上传
			upload(params, type) {
				//console.log(params);
				const file = params.file,
					isJPGPNG = file.type === 'image/jpeg' || 'image/png',
					isLt1MB = file.size / 1024 <= 1024;
				if (!isJPGPNG) {
					this.$message.error('只能上传图片格式png、jpg!');
					return;
				}
				if (!isLt1MB) {
					this.$message.error('图片不能大于1M');
					return;
				}

				let heard_img = new FormData();
				heard_img.append('file[]', file);
				this.$http(this.$ApiList.publicUpload, heard_img).then(res => {
					if (type == 0) {
						this.userInfoForm.heard_img = res.datas[0];
					} else {
						this.addUserForm.heard_img = res.datas[0];
						this.imageUrl = res.datas[0];
					}
				});
			},
			addUserClick(formName) {
				this.$refs[formName].validate(valid => {
					if (valid) {
						this.$http(this.$ApiList.UserAdd, this.addUserForm).then(res => {
							this.$layer.msg('提交成功');
							this.addUserDialog = false;
							this.init();
						});
					} else {
						this.$layer.msg('请填写完整信息后提交');
					}
				});
			},
			refreshPage(type) {
				this.page = 1;
				this.classSelect = "";
				this.admin_role = -1;
				this.selectText = '';
				if (!type) {
					this.selectContent = ''
				} else if (type === 'delQRcode') {
					console.log('刷新当前用户二维码')
				}
				this.init()
			},
			getRole() {
				this.$http(this.$ApiList.RoleList).then(res => {
					this.role_name = res.datas;
					if (this.admin_id == 2) {
						this.roleList = [{
								admin_role_id: -1,
								name: '所有用户'
							},
							{
								admin_role_id: 0,
								name: '普通用户'
							},
							{
								admin_role_id: 14,
								name: '商家业务员'
							},
							{
								admin_role_id: 15,
								name: '商家分销'
							},
							{
								admin_role_id: 16,
								name: '商家财务'
							},
							{
								admin_role_id:30,
								name:'商家设计师'
							}
						];
						this.searchOption = [{
							value: 0,
							label: '用户ID'
						}, {
							value: 1,
							label: '电话'
						}];
						this.role_name.unshift({
							admin_role_id: 0,
							name: '普通用户'
						});
					} else if (this.admin_type == 1 || this.admin_type == 4) {
						this.roleList = res.datas;
						this.roleList.splice(0, 1)
						this.roleList.unshift({
							admin_role_id: 0,
							name: '普通用户'
						});
						this.roleList.unshift({
							admin_role_id: -1,
							name: '所有用户'
						});
					}
				});



				this.$http(this.$ApiList.RoleTypeList).then(res => {
					this.roleTypeList = res.datas
					this.roleTypeList.unshift({
						role_type: '',
						type_name: '所有身份'
					});
				});
			},
			// 查看用户足迹
			goFootDetails(id) {
				this.$router.push({
					path: '/foot_details',
					query: {
						id: id
					}
				});
			},
			userLogout(id) {
				this.$confirm('此操作将永久注销该用户, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					})
					.then(() => {
						let data = {
							user_id: id
						};
						this.$http(this.$ApiList.UserLogout, data).then(res => {
							this.$message({
								message: '注销成功',
								type: 'success'
							});
							this.refreshPage();
						});
					})
					.catch(() => {
						this.$message({
							type: 'info',
							message: '已取消注销'
						});
					});
			},
			goSpreadUser(user_id) {
				this.$layer.iframe({
					title: '推广用户',
					maxmin: true,
					area: ['70%', '70%'],
					content: {
						content: spreadUser, //传递的组件对象
						parent: this, //当前的vue对象
						data: {
							id: user_id
						} //props
					}
				});
			},
			getFilialeItems(){
				this.$http(this.$ApiList.FilialeItems).then(res=>{
					this.filialeList = res.datas
				})
			},
			// 增加抽奖次数
			addTime(user_id){
				this.$http(this.$ApiList.UpFrequency,{user_id}).then(res=>{
					this.$message.success(res.datas);
					this.init(this.page);
				})
			},
			// 提交分组
			onSubmit(formName){
				this.$refs[formName].validate(valid=>{
					if(valid){
						let data = this.groupForm
						data.store_id = this.store_id
						this.$http(this.$ApiList.UserStoreGroup,this.groupForm).then(res=>{
							this.$message.success(res.datas)
							this.$refs[formName].resetFields()
							this.isGroupDialog = false
						})
					}
				})
			},
			setSelectValue(obj){
				const { type,value } = obj
				switch (type) {
					case 'admin_role':
						this.admin_role = value
						break;
					case 'role_type':
						this.role_type = value
						break;
					case 'is_exhibition':
						this.is_exhibition = value
						break;
					default:
						break;
				}
				this.init()
			},
			onClone(formName){
				this.isGroupDialog = false
				this.$refs[formName].resetFields()
			}
		},
		created() {
			this.getRole();
			this.init();
			this.getFilialeItems();
			if (this.power.length != 0) {
				this.btnShow = this.$judgePower(this.power, this.admin_id, this.$route.path, this.btnShow);
			}
		}
	};
</script>
<style>
	.user-info .el-avatar {
		display: block;
		margin: 0 auto;
	}

	.info-exhibition {
		margin-top: 20px;
	}

	.info-exhibition p {
		text-align: center;
		line-height: 30px;
		margin-bottom: 0;
	}
	.btn{
		margin-bottom: 10px;
	}
</style>
